<template>
  <div class="box">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item to="/login" replace>首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/login/user" replace>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>社保信息</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="tableBox">
      <div class="tableTitle">社保信息</div>
      <div class="table">
        <div class="title">用户信息</div>
        <div>
          <el-row>
            <el-col :span="4">姓名</el-col>
            <el-col :span="4">{{user_info.name||'无数据'}}</el-col>
            <el-col :span="4">性别</el-col>
            <el-col :span="4">{{user_info.gender||'无数据'}}</el-col>
            <el-col :span="4">民族</el-col>
            <el-col :span="4">{{user_info.nation||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">户口性质</el-col>
            <el-col :span="4">{{user_info.hukou_type||'无数据'}}</el-col>
            <el-col :span="4">身份证</el-col>
            <el-col :span="4">{{user_info.certificate_number||'无数据'}}</el-col>
            <el-col :span="4">家庭住址</el-col>
            <el-col :span="4">{{user_info.home_address||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">单位名称</el-col>
            <el-col :span="4">{{user_info.company_name||'无数据'}}</el-col>
            <el-col :span="4">手机号码</el-col>
            <el-col :span="4">{{user_info.mobile||'无数据'}}</el-col>
            <el-col :span="4">起缴日</el-col>
            <el-col :span="4">{{user_info.begin_date||'无数据'}}</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">参加工作时间</el-col>
            <el-col :span="4">{{user_info.time_to_work||'无数据'}}</el-col>
            <el-col :span="4">当前缴费状态</el-col>
            <el-col :span="4">{{user_info.type||'无数据'}}</el-col>
            <el-col :span="4"></el-col>
            <el-col :span="4"></el-col>
          </el-row>
        </div>
        <overview :overview-object="endowment_overview" :insurance-array="endowment_insurance" text="养老"></overview>
        <overview :overview-object="medical_overview" :insurance-array="medical_insurance" text="医疗"></overview>
        <overview :overview-object="unemployment_overview" :insurance-array="unemployment_insurance" text="失业"></overview>
        <overview :overview-object="accident_overview" :insurance-array="accident_insurance" text="工伤"></overview>
        <overview :overview-object="maternity_overview" :insurance-array="maternity_insurance" text="生育"></overview>
        <div class="title">医疗消费记录</div>
        <el-table :data="medical_consumption" max-height="700">
          <el-table-column prop="balance_date" label="结算日期" align="center"></el-table-column>
          <el-table-column prop="medical_institution" label="医疗机构" align="center"></el-table-column>
          <el-table-column prop="type" label="类别" align="center"></el-table-column>
          <el-table-column prop="personal_account_spending" label="个人账户支出" align="center"></el-table-column>
          <el-table-column prop="overall_account_spending" label="统筹账户支出" align="center"></el-table-column>
          <el-table-column prop="large_cost" label="大额费用" align="center"></el-table-column>
          <el-table-column prop="cash_payment" label="现金支付" align="center"></el-table-column>
          <el-table-column prop="other_support" label="其他补助" align="center"></el-table-column>
          <el-table-column prop="total_amount" label="总额" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import overview from './components/overview'
  export default {
    data () {
      return {
        user_info: {},
        endowment_overview: {},
        endowment_insurance: [],
        medical_overview: {},
        medical_insurance: [],
        unemployment_overview: {},
        unemployment_insurance: [],
        accident_overview: {},
        accident_insurance: [],
        maternity_overview: {},
        maternity_insurance: [],
        medical_consumption: []
      }
    },
    created () {
    },
    components: {
      overview
    }
  }
</script>

<style lang="less" ref="stylesheet/less" scoped>
  .table {
    text-align: center;

    .title {
      font-weight: bold;
      padding: 15px 0;
      border-bottom: 1px solid #eee;
      background-color: #2e78f2;
      color: #fff;
    }

    .el-row {
      display: flex;

      .el-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 0;
        border-right: 1px solid #eee;
        border-bottom: 1px solid #eee;

        &:nth-child(2n+1) {
          color: #000;
          font-weight: 700;
        }

        &:last-child {
          border-right: none;
        }
      }
    }
  }
</style>
